<template>
    <div
        class="relative flex-grow flex-row justify-start bg-zinc-500 rounded-full overflow-hidden"
        ref="scroller"
    >
        <Slider
            class="slider cursor-default"
            :model-value="props.modelValue"
            min="1"
            max="100"
            @update:model-value="change"
        >
            <div
                class="h-full bg-gray-100"
                :style="{
                    width: props.modelValue + '%'
                }"
            ></div>
            <template #button>
                <div class="btn h-6 w-12"></div>
            </template>
        </Slider>
        <div class="absolute h-full w-full top-0 pointer-events-none">
            <slot></slot>
        </div>
    </div>
</template>
<style scoped >
.slider {
    --van-slider-active-background-color: rgb(113 113 122);
    --van-slider-inactive-background-color: transparent;
    @apply bg-zinc-600 h-full w-full rounded;
}
</style>
<script lang="ts" setup>
import { Slider } from 'vant';
const props = defineProps<{ modelValue: number, position: 'x' | 'y' }>();

const emit = defineEmits<{ (event: "update:model-value", number: number): void }>();
const change = (num: number) => {
    emit('update:model-value', num)
};
</script>